<script setup>
import { ref, onMounted } from 'vue'
import { listIndicators, listAdminOrders, listAdminDoctors, listAdminUsers } from '../../api/admin'

const stats = ref({ indicators: '-', orders: '-', doctors: '-', users: '-' })

onMounted(async () => {
  try {
    const [ind, ord, doc, usr] = await Promise.all([
      listIndicators({ page: 1, size: 1 }).catch(() => ({})),
      listAdminOrders({ page: 1, size: 1 }).catch(() => ({})),
      listAdminDoctors({ page: 1, size: 1 }).catch(() => ({})),
      listAdminUsers({ page: 1, size: 1 }).catch(() => ({}))
    ])
    stats.value = {
      indicators: ind?.total ?? (Array.isArray(ind?.list) ? ind.list.length : '-'),
      orders: ord?.total ?? (Array.isArray(ord?.list) ? ord.list.length : '-'),
      doctors: doc?.total ?? (Array.isArray(doc?.list) ? doc.list.length : '-'),
      users: usr?.total ?? (Array.isArray(usr?.list) ? usr.list.length : '-')
    }
  } catch (e) {
    // 保持占位符，不阻断首页显示
  }
})
</script>

<template>
  <div class="home-wrap">
    <div class="page-bar">
      <div class="page-title">仪表盘</div>
    </div>
    <el-row :gutter="16">
      <el-col :xs="24" :sm="12" :md="6">
        <el-card shadow="hover" class="stat-card stat-green">
          <div class="stat-title">体检项目数</div>
          <div class="stat-value">{{ stats.indicators }}</div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="6">
        <el-card shadow="hover" class="stat-card stat-blue">
          <div class="stat-title">订单数</div>
          <div class="stat-value">{{ stats.orders }}</div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="6">
        <el-card shadow="hover" class="stat-card stat-green">
          <div class="stat-title">医生数</div>
          <div class="stat-value">{{ stats.doctors }}</div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="6">
        <el-card shadow="hover" class="stat-card stat-blue">
          <div class="stat-title">用户数</div>
          <div class="stat-value">{{ stats.users }}</div>
        </el-card>
      </el-col>
    </el-row>

    <el-card class="mt-2">
      <h3>管理员首页</h3>
      <p>通过左侧菜单管理科室、职称、指标、套餐、订单与排班。</p>
    </el-card>
  </div>
</template>

<style scoped>
.home-wrap { padding: 0; }
.stat-card { border: none; }
.stat-title { color: var(--text-secondary); font-size: 14px; }
.stat-value { font-size: 28px; font-weight: 700; margin-top: 6px; }
.stat-green .stat-value { color: var(--brand-primary); }
.stat-blue .stat-value { color: var(--brand-secondary); }
.mt-2 { margin-top: 12px; }
</style>